<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
                <div class="flex flex_between">
                  <p class="flex flex_vcenter pdb20">
                    <i class="titleTag"></i>
                    <span class="fRedBig">健康讲座</span>
                  </p>
                    <button class="longBtn" @click="addhealthtalk(item)">新增健康讲座</button>
                </div>
                <div class="contain bg">
                    <div class="topblank"></div>
                    <div class="healthtalklist">
                        <table class="table">
                            <tbody>
                                <tr v-for="item in healtalklist" track-by="$index">
                                    <td>
                                        <h3>{{item.lectureTitle}}
                                        <div class="btn-group" role="group" v-if="item.enterCount>0">
                                        <button type="button" class="btn btn-default ok">报名</button><button type="button" class="btn btn-default nogo">{{item.enterCount}}人</button>
                                        </div>
                                        </h3>
                                        <p class="talktime">讲座时间：<span>{{item.lectureyear}} {{item.lecturetime}}</span></p>
                                        <p class="talkdoc">主讲医生：<span>{{item.lectureSayerName}} {{item.levelText}}</span></p>
                                        <p class="talkaddr">讲座地点：<span>{{item.lectureAddr}}</span></p>
                                    </td>
                                    <td>
                                        <p>申请人</p>
                                        <p>{{item.infoApplyUserName}}</p>
                                    </td>
                                    <td>
                                        <p>{{item.infoApplydate}}</p>
                                        <p>{{item.infoApplyyear}}</p>
                                    </td>
                                    <td>
                                        <p :class="{red:item.verifyState=='2',green:item.verifyState=='1',orange:item.verifyState=='0'}">{{item.verifyStateText}}</p>
                                        <!--   <p class="green">已发布</p>
                                        <p class="orange">待审核</p> -->
                                    </td>
                                    <td v-if="login_roleId=='main_doctor'">
                                        <span class="glyphicon glyphicon-pencil" v-if="item.verifyState=='2'" @click="addhealthtalk(item)"></span>
                                        <span class="glyphicon glyphicon-trash" v-if="item.verifyState=='1'||item.verifyState=='2'" @click="delehealthtalk(item)"></span>
                                        <span class="glyphicon glyphicon-eye-open" v-if="item.verifyState=='0'||item.verifyState=='1'" @click="lookhealthtalk(item)"></span>
                                    </td>
                                    <td v-if="login_roleId=='chronic_doctor'">
                                        <!--  <span class="glyphicon glyphicon-pencil" v-if="item.verifyState=='0'"></span> -->
                                        <span class="glyphicon glyphicon-trash" v-if="item.verifyState=='1'" @click="delehealthtalk(item)"></span>
                                        <span class="glyphicon glyphicon-eye-open" v-if="item.verifyState=='2'||item.verifyState=='1'" @click="lookhealthtalk(item)"></span>
                                        <span class="glyphicon glyphicon-list-alt" v-if="item.verifyState=='0'" @click="verifyhealthtalk(item)"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        <div class="pull-left">
                                            <button class="secondBtn" @click="refresh">刷新</button>
                                        </div>
                                        <div class="pull-right">
                                            <boot-page v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param"></boot-page>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增或者修改 -->
        <healtalk-edit :modaltitle="modaltitle" :username="username" :applytime="applytime" :uploadfilename="uploadfilename" :imgurl="imgurl" v-ref:addhealthtalk></healtalk-edit>

        <!-- 作废 -->
         <healtalk-dele :modaltitle="modaltitle" :username="username" :applytime="applytime" :uploadfilename="uploadfilename" :imgurl="imgurl" v-ref:delehealthtalk></healtalk-dele>
        <!-- 审核 -->
        <healtalk-verify :modaltitle="modaltitle" :username="username" :applytime="applytime" :uploadfilename="uploadfilename" :imgurl="imgurl" v-ref:verifyhealthtalk></healtalk-verify>
         <!-- 查看 -->
        <div class="modal fade" id="lookhealthtalk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">
                {{modaltitle}}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="fail cbafter" v-show="lookitem.verifyState=='2'">

                            <div class="textdes">
                                <p class="nosuccess">审核未通过！</p>
                                 <p>{{lookitem.verifySuggestion}}</p>
                            </div>

                        </div>
                        <div class="changeinfo cbafter">
                            <div class="changeinfo_head cbafter">
                                <span>申请人：{{username}}</span>
                                <span>申请时间：{{applytime}}</span>
                            </div>
                            <div class="cb changeinfo_con">
                                 <h3>{{lookitem.lectureTitle}} <a href="{{imgurl}}" class="{none:imgurl==''}">{{uploadfilename}}</a></h3>
                                  <p class="talktime">讲座时间：<span>{{lookitem.lectureyear}} {{lookitem.lecturetime}}</span></p>
                                  <p class="talkdoc">主讲医生：<span>{{lookitem.lectureSayerName}} {{lookitem.levelText}}</span></p>
                                  <p class="talkaddr">讲座地点：<span>{{lookitem.lectureAddr}}</span></p>
                                   <p class="talkacon">讲座内容：<span>{{lookitem.lectureContent}}</span></p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
import healtalkEdit from 'components/healtalk-edit.vue'
import healtalkDele from 'components/healtalk-dele.vue'
import healtalkVerify from 'components/healtalk-verify.vue'
import bootPage from 'components/BootPage.vue'
export default {
    data() {
            return {
                login_roleId: Public.getsessionStorage("roleId"),
                 //公用的start
                username: sessionStorage.getItem('userName'),
                applytime: "",
                imgurl: "", //修改的时候文件预览
                uploadfilename:"",//修改的时候文件下载
                 modaltitle: "",
                 //公用的end
                healtalklist: [],
                lenArr: [10, 20, 50], // 每页显示长度设置
                pageLen: 5, // 可显示的分页数
                headersparam: {
                    "X-Service-Id": "coms.healthLecturesService",
                    "X-Service-Method": Public.getsessionStorage("roleId") == "main_doctor" ? "queryHealthLecturesByInfoApplyUser" : "queryHealthLectures",
                },
                lookitem:{
                  lectureTitle:"",
                  lectureyear:"",
                  lecturetime:"",
                  lectureSayerName:"",
                  levelText:"",
                  lectureAddr:"",
                  verifyState:"",
                  infoDeleteReason:"",
                  verifySuggestion:"",
                  lectureContent:""
                },

            }
        },
        computed: {

        },
        components: {
            moduleHead, menuList, bootPage,healtalkEdit,healtalkDele,healtalkVerify
        },
        ready() {


        },
        methods: {
            // 列表页面刷新按钮
            refresh() {
                    this.$refs.page.refresh()
                },
                //新增和修改弹框
                addhealthtalk(item) {
                     this.$refs.addhealthtalk.addhealthtalk(item);
                },

                // 查看
                lookhealthtalk(item) {
                    $("#lookhealthtalk").modal("show");
                    this.modaltitle = "健康讲座信息";
                    this.username = item.infoApplyUserName;
                    this.applytime = item.infoApplyTime;
                    this.lookitem = item;
                    this.uploadfilename=item.fileName;
                      this.imgurl = Public.FILEDOWNLOAD_URL() + item.lectureAttachFile;

                },
                // 作废弹框
                delehealthtalk(item){
                   this.$refs.delehealthtalk.delehealthtalk(item);
                },

                // 审核弹框
                verifyhealthtalk(item){
                     this.$refs.verifyhealthtalk.verifyhealthtalk(item);

                },



        },
        events: {
            // 分页列表数据
            'data' (data) {
                if (data.length > 0) {
                    $.each(data, function(index, el) {
                        el.lectureyear = el.lectureEndTime.substring(0, 10);
                        el.lecturetime = el.lectureBeginTime.substring(10, 16) + "-" + el.lectureEndTime.substring(10, 16);
                        el.infoApplyyear = el.infoApplyTime.substring(0, 10);
                        el.infoApplydate = el.infoApplyTime.substring(10, 16);
                    });
                }
                this.healtalklist = data;
            },
            'verifyhealthtalksave' () {
                this.refresh();
             },
            'healthtalksave' () {
                this.refresh();
             },
             'delehealthtalksave' () {
                this.refresh();
             }

        },
        watch: {

        },
}
$(function() {

})
</script>
<style scoped>
/*会员列表*/

.contain .healthtalklist {
    padding: 20px 30px
}

.contain table td {
    padding-top: 40px;
    text-align: center;
}

.contain table tr td:nth-child(1) {
    text-align: left;
    padding-top: 0
}

.contain table tr td:nth-child(4) {
    padding-top: 50px;
    font-weight: bold
}

.contain table tr td:nth-child(5) {
    color: #9A9A9A;
    padding-top: 50px
}

.contain table tr td span.glyphicon {
    display: inline-block;
    font-size: 16px;
    width: 30px;
    height: 30px;
}

.contain table tr td span.glyphicon:hover {
    color: #1dc499;
    cursor: pointer;
}

.table>tbody>tr>td {
    border-bottom: 1px dashed #ddd;
    border-top: none;
}

.table>tbody>tr:last-child td {
    padding-top: 10px;
}

.btn-default.ok {
    color: #fff
}

.contain .table td h3 {
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    padding-top: 5px;
}

.btn-default {
    padding: 3px 12px;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
    color: #fff;
    background-color: #1dc499;
    border-color: #ccc;
    cursor: default;
}

.go.btn-default:hover,
.go.btn-default:focus,
.go.btn-default.focus,
.go.btn-default:active,
.go.btn-default.active {
    cursor: pointer;
}

.nogo.btn-default:hover,
.nogo.btn-default:focus,
.nogo.btn-default.focus,
.nogo.btn-default:active,
.nogo.btn-default.active {
    background-color: #fff;
    color: #333;
}

.contain .table td h3>.btn-group {
    margin-left: 10px
}

.contain .table td p {
    color: #9A9A9A;
    line-height: 26px;
}

.contain .table td p span {
    color: #333;
}

.talktime,
.talkdoc,
.talkaddr,
.talkacon{
    padding-left: 30px;
}

.talktime {
    background: url(../../assets/img/time.png) no-repeat left center;
}

.talkdoc {
    background: url(../../assets/img/talkdoc.png) no-repeat left center;
}

.talkaddr {
    background: url(../../assets/img/talkaddr.png) no-repeat left center;
}
.talkacon{
  background: url(../../assets/img/fyf.png) no-repeat left center;
}

.topblank {
    background: #fafafa;
    border-radius: 10px 10px 0 0;
    height: 50px;
    border-bottom: 1px solid #ddd;
}

.contain .table td p.red {
    color: #ef5037;
}

.contain .table td p.orange {
    color: #fdab36;
}

.contain .table td p.green {
    color: #1dc499;
}





</style>
